import React, {
  Component,
  useReducer,
  useState,
  useMemo,
  memo,
  createContext,
  useContext,
} from "react";

/* 
  React.memo
  作用：允许组件在Props没有改变的情况下跳过渲染
   React组件默认的渲染机制： 只要父组件重新渲染子组件就会重新渲染

   用memo()把组件包裹之后，父组件渲染，子组件不会更新了，  （Context的值，子组件没接收，也不会渲染） 


   1.传递一个简单类型的prop， prop变化时组件重新渲染
   2.传递一个引用类型的prop，比较的是新值和旧值的引用是否相等（每次渲染的时候，引用类型地址值不相等；所以子组件会渲染）,
   3.保证引用稳定  --> useMemo  组件渲染的过程中缓存一个值
*/
let Ctx = createContext();
const Son = memo(() => {
  let [num, setNum] = useState(0);
  console.log("son组件打印了");
  let value = useContext(Ctx);
  console.log(value, "son-Value");
  return (
    <>
      <h1>Son组件</h1>
      <p>son{num}</p>
      {/* <p>son:{value}value</p> */}
      <button onClick={() => setNum(num++)}>++</button>
    </>
  );
});
function UseRedu() {
  let [num, setNum] = useState(0);
  console.log("parent组件打印了");
  let value = useContext(Ctx);
  console.log(value, "parentValue");
  let list = useMemo(() => {
    return [1, 2, 3];
  }, []);
  return (
    <>
      <h3>React.memo</h3>
      <Son list={list}></Son>
      <p>父组件的：{num}</p>
      <p>父组件的context:{value}parent</p>
      <button onClick={() => setNum(num++)}>++</button>
      <button onClick={() => value + 1}>value++</button>
    </>
  );
}
export default function Wefd() {
  let [num, setNum] = useState(0);
  return (
    <>
      <div>
        <Ctx.Provider value={num}>
          <UseRedu></UseRedu>
          <button onClick={() => setNum(num + 1)}>previder++</button>
        </Ctx.Provider>
      </div>
    </>
  );
}
